<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../build/react.js"></script>
    <script src="../build/jquery-2.1.4.min.js"></script>
    <script src="../build/JSXTransformer.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
    <script type="text/jsx">
        var data = [
            {name:"王晓雯",text:"*My name is vivian.*"},
            {name:"朱长静",text:"*My name is changjing.*"},
            {name:"刘兰兰",text:"*My name is lanlan.*"}
        ];

        var CommentBox = React.createClass({
            render:function(){
                return (
                        <div className="commentBox">
                            <h1>Comments</h1>
                            Hello, world!I am a commentBox.
                            <CommentList data={this.props.data}/>
                            <CommentForm />
                        </div>
                );
            }
        });

        var CommentList = React.createClass({
            render:function(){
                var commentNodes = this.props.data.map(function(comment){
                    return (
                            <Comment name={comment.name}>
                                {comment.text}
                            </Comment>
                    );
                });
                return (
                        <div className="commentList">
                            {commentNodes}
                        </div>
                );
            }
        });

        var converter = new Showdown.converter();

        var Comment = React.createClass({
            render:function(){
                var rawMarkup = converter.makeHtml(this.props.children.toString());
                return (
                        <div className="comment">
                            <h2 className="commentName">
                                {this.props.name}
                            </h2>
                            <span dangerouslySetInnerHTML={{__html:rawMarkup}}/>
                        </div>
                );
            }
        });

        var CommentForm = React.createClass({
            render: function () {
                return (
                        <div className="commentForm">
                            Hello, world! I am a commentForm.
                        </div>
                );
            }
        });

        //渲染
        React.render(
                <CommentBox data={data}/>,
                document.getElementById("example"),
                function () {
                    console.log("我被渲染了...");
                }
        );
    </script>
</head>
<body>
<h2 id="example"></h2>
</body>
</html>